<template>
  <div>
    <h1 style="text-align: center; margin: 20px 0;">数据分析仪表盘</h1>
    
    <!-- 第一行：统计数据 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="6">
        <el-card>
          <h3>总用户数</h3>
          <p>{{ stats.totalUsers }}</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <h3>活跃用户数</h3>
          <p>{{ stats.activeUsers }}</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <h3>新增用户数</h3>
          <p>{{ stats.newUsers }}</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <h3>封禁用户数</h3>
          <p>{{ stats.bannedUsers }}</p>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第二行：饼状图 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="24">
        <div class="chart-container">
          <div ref="typeProportionChart" style="height: 400px;"></div>
        </div>
      </el-col>
    </el-row>

    <!-- 第三行：热度歌曲/笔记 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <h3>热门歌曲</h3>
          <el-table :data="hotSongs" style="width: 100%">
            <el-table-column prop="music_name" label="歌曲名称"></el-table-column>
            <el-table-column prop="type" label="歌曲类型"></el-table-column>
            <el-table-column prop="popularity" label="热度指数"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <h3>热门笔记</h3>
          <el-table :data="hotNotes" style="width: 100%">
            <el-table-column prop="title" label="笔记标题"></el-table-column>
            <el-table-column prop="view_count" label="浏览量"></el-table-column>
            <el-table-column prop="comment_count" label="评论量"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";

export default {
  data() {
    return {
      stats: {
        totalUsers: 0,
        activeUsers: 0,
        newUsers: 0,
        bannedUsers: 0,
      },
      hotSongs: [],
      hotNotes: [],
      networkData: [], // 用于存储歌曲类型占比数据
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        // 获取统计数据
        const statsRes = await axios.get("/v1/stats");
        this.stats = statsRes.data;

        // 获取歌曲类型占比数据
        const typeProportionsRes = await axios.get("/music/type-proportions");
        this.networkData = typeProportionsRes.data;

        // 获取热门歌曲
        const hotSongsRes = await axios.get("/music/g1/popularity");
        this.hotSongs = hotSongsRes.data;

        // 获取热门笔记
        const hotNotesRes = await axios.get("/v1/NoteCreate/view_count");
        this.hotNotes = hotNotesRes.data;

        this.initCharts();
      } catch (error) {
        console.error("数据加载失败：", error);
      }
    },
    initCharts() {
      // 歌曲类型占比饼图
      const typeProportionChart = echarts.init(this.$refs.typeProportionChart);
      typeProportionChart.setOption({
        title: { text: "歌曲类型占比", left: "center" },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
          {
            name: '歌曲类型',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.networkData.map(item => ({
              value: item.count,
              name: item.type
            })),
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
  },
};
</script>

<style scoped>
.chart-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-card {
  margin-bottom: 20px;
}

.el-table {
  margin-top: 10px;
}
</style>